<script setup>
import { ref } from 'vue'
import autoUser from '@/assets/images/auto-user.png'
import UserLogin from './component/UserLogin.vue'
import { SwitchButton } from '@element-plus/icons-vue'
import { storeToRefs } from 'pinia'
import useUserStore from '@/pinia/userInfo'
const userStore = useUserStore()
const { token, userInfo } = storeToRefs(userStore)
const isShowLogin = ref(false)
const gameList = ref([
  {
    title: '英雄联盟',
    subTitle: '全新英雄对战游戏',
    img: 'https://imgcdn.start.qq.com/cdn/win.client/imgres/game-icon/600015-l.png'
  },
  {
    title: '原神',
    subTitle: '跨越尘世的探索之旅!',
    img: 'https://imgcdn.start.qq.com/cdn/win.client/imgres/game-icon/200047-l.png'
  },
  {
    title: '命运方舟',
    subTitle: '次世代MMORPG游戏',
    img: 'https://imgcdn.start.qq.com/cdn/win.client/imgres/game-icon/400159-l.png'
  },
  {
    title: '地下城与勇士：创新世纪',
    subTitle: '随时随地玩地下城端游',
    img: 'https://imgcdn.start.qq.com/cdn/win.client/imgres/game-icon/600016-l.png'
  }
])
defineOptions({
  name: 'userLogin'
})

const quitLogin = () => {
  userStore.setState({
    token: ''
  })
}
const goStream = () => {
  if (token.value) {
    window.open('/#/peerStream')
  } else {
    isShowLogin.value = true
  }
}
</script>
<template>
  <div class="login font-sans flex flex-col">
    <video
      src="https://start.gtimg.com/act/video/pcweb_banner_1705315316.mp4"
      muted
      autoplay
      loop
      class="object-cover h-[100vh] w-[100%] z-[-1] absolute opacity-10"
    ></video>
    <UserLogin v-model="isShowLogin"></UserLogin>
    <div class="h-[60px] bg-[#000] bg-opacity-20 border-[1px] border-[#fff] border-opacity-10">
      <div class="main-container flex items-center h-[60px] justify-between">
        <div class="text-[20px] tracking-[2px] font-bold text-[#fff] text-opacity-70">云游戏</div>
        <img
          v-show="!token"
          :src="autoUser"
          class="size-[30px] block cursor-pointer"
          @click="isShowLogin = true"
          alt=""
        />
        <div v-show="token" class="text-[#fff] text-opacity-30 flex items-center">
          <span class="pr-[5px]">
            {{ userInfo.uid }}
          </span>
          <el-icon class="cursor-pointer" size="18" color="#666" @click="quitLogin">
            <SwitchButton />
          </el-icon>
        </div>
      </div>
    </div>
    <div class="flex-1 pt-[20px]">
      <div class="main-container">
        <div class="grid grid-cols-3 gap-[20px]">
          <div
            class="bg-[#20222e] rounded-lg overflow-hidden group"
            v-for="(game, index) in gameList"
            :key="index"
          >
            <div class="overflow-hidden">
              <img class="group-hover:scale-110 transition-all" :src="game.img" :alt="game.title" />
            </div>
            <div class="flex items-center justify-between p-[20px]">
              <div class="space-y-[10px]">
                <div class="text-[16px] line-clamp-1">{{ game.title }}</div>
                <div class="text-[#fff] text-opacity-60 line-clamp-1">{{ game.subTitle }}</div>
              </div>
              <div
                class="btn-primary w-[100px] h-[40px] rounded-2xl cursor-pointer"
                @click="goStream(game)"
              >
                一键启动
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.login {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  .header {
    max-width: 1200px;
    margin: 0 auto;
  }
}
</style>
